<template>
    <div ref="chartView" class="chart-view"></div>
</template>

<script setup>
import {ref,onMounted,watch} from "vue"
import {formatDate} from '@/utils/format.js'
import * as echarts from 'echarts';
const props = defineProps({
    title:{
        type:String,
        default:''
    },
    list:{
        type:Array,
        default:[]
    },
    min:{
        type:Number,
        default:0
    },
     max:{
        type:Number,
        default:200
    }, 
    splitNumber:{
        type:Number,
        default:5
    },
    xList:{
        type:Array,
        default:[]
    },
    type:{
        type:Number,
        default:1
    }
})
const chartView = ref(null)

watch(()=>props.xList,(n,o)=>{
    setChartView()
})

onMounted(() => {
    setChartView()
})
const setChartView = ()=>{
    let chartDom = chartView.value;
    let myChart = echarts.init(chartDom);
    let option = {
        title: {
            text: props.title,
            left: 'center',
            textStyle:{
                fontSize:13
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: props.xList,
            axisLabel: {
                show: true,
                rotate: 45
            },
        },
        yAxis: [
            
            {
                type: 'value',
                position: 'right',
                alignTicks: true,
                offset: 0,
                min: props.min,
                max: props.max,
                splitNumber:props.splitNumber,
                axisLine: {
                    show: true,
                    lineStyle: {
                     color: '#ffffff'
                    }
                },
                axisLabel: {
                    formatter: (val)=>{
                        let obj= {
                            '0':'极缺',
                            '10':'缺乏',
                            '20':'较缺乏',
                            '30':'适量',
                            '40':'丰富',
                            '50':'较丰富'
                        }
                        if(props.type==1){
                            let obj1 ={
                                '3.5':'强酸性',
                                '4.5':'酸性',
                                '5.5':'微酸性',
                                '7':'中性',
                                '8':'微碱性',
                                '9':'强碱性'
                            }
                            return obj1[val]
                        }else if(props.type==3){
                            let obj3 ={
                                '0':'极缺',
                                '0.5':'较缺乏',
                                '1':'适量',
                                '1.5':'丰富',
                                '2':'特丰富'
                            }
                            return obj3[val]
                        }else if(props.type==4){
                            let obj4 ={
                                '0':'极缺',
                                '30':'缺乏',
                                '60':'较缺乏',
                                '90':'适量',
                                '120':'丰富',
                                '150':'特丰富'
                            }
                            return obj4[val]
                        }else if(props.type==6){
                            let obj6 ={
                                '0':'极缺',
                                '50':'缺乏',
                                '100':'较缺乏',
                                '150':'适量',
                                '200':'丰富',
                                '250':'较丰富'
                            }
                            return obj6[val]
                        }else{
                            return obj[val]
                        }
                    },
                    color:'#333'
                }
            },
            {
                type: 'value',
                min: props.min,
                max: props.max,
                splitNumber:props.splitNumber,
            },
        ],
        series: [
            {
            data: props.list,
            type: 'line'
            }
        ]
        };

    option && myChart.setOption(option);
    window.addEventListener('resize',()=> {
          myChart.resize(); 
    });
}
</script>

<style lang="scss" scoped>
.chart-view{
    height: 100%;
    width:100%;
    position: absolute;
}
</style>